<template>
  <div class="ydfx">
    <div class="title"></div>
    <div class="cnt">
      <div class="left">
        <ul>
          <li v-for="(item, index) in leftData" :key="'ydl' + index">
            <img :src="item.icon">
            <div class="info">
              <p class="num">{{ item.value || 0 }}</p>
              <div class="hb" :class="{down: parseFloat(item.hb)<0}">
                较上月
                <div class="sj"></div>
                <span>{{ Math.abs(parseFloat(item.hb)) || 0 }}%</span>
              </div>
              <p class="name">{{ item.name }}</p>
            </div>
          </li>
        </ul>
      </div>
      <div class="right">
        <div class="scroll-table">
          <ul class="tHead">
            <li v-for="item in columns" :key="item.key + Math.random()" :style="{width: item.width}">
              <div>{{item.title}}</div>
            </li>
          </ul>
          <p class="nodata" v-if="monthData.matterDetail.length==0">暂无数据</p>
          <vue-seamless-scroll v-else :data="monthData.matterDetail" class="seamless-warp" :class-option="option">
            <ul class="tBody">
              <li v-for="(item,index) in monthData.matterDetail" :key="index" class="clearFloat">
                <section>
                  <div v-for="it in columns" :key="it.key + Math.random()" :style="{width: it.width}">
                    <template v-if="it.key=='qjh'">
                      <div class="hb" :class="{down: parseFloat(item.rate)<0}">
                        <p class="num">{{item.number}}</p>
                        较上月
                        <div class="sj"></div>
                        <span>{{ Math.abs(parseFloat(item.rate)) }} %</span>
                      </div>
                    </template>
                    <span :title="item[it.key]">{{item[it.key]}}</span>
                  </div>
                </section>
              </li>
            </ul>
          </vue-seamless-scroll>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  name: "ryjx",
  components: {

  },
  props: {
    monthData: {
      type: Object,
      default: () => ({
        matterDetail: [],
      })
    }
  },
  computed: {
    option(){
      return {
        step: 0.5, // 数值越大速度滚动越快
        limitMoveNum: 6, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        openTouch: false, //移动端touch滑动
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000, // 单步运动停止的时间(默认值1000ms)
        // ...this.scrollOption
      }
    },
    leftData(){
      return this.leftList.map(item => {
        return {
          ...item,
          value: this.monthData[item.key],
          hb: this.monthData[item.key + 'Rate'],
        }
      })
    }
  },
  data() {
    return {
      data: {},
      // 左侧列表数据
      leftList: [
        { icon: require('@/assets/home/ydfx1.png'), key: "totalCall", name: "本地叫号量", hb: "0%", value: 0 },
        { icon: require('@/assets/home/ydfx2.png'), key: "goodEval", name: "好评数", hb: "0%", value: 0 },
        { icon: require('@/assets/home/ydfx3.png'), key: "badEval", name: "差评数", hb: "0%", value: 0 },
      ],
      // 右侧列表数据
      rightList: [
        {name:"法律", value:249, hb: 4.6 },
        {name:"执法", value:249, hb: 4.6 },
        {name:"创业", value:249, hb: 4.6 },
        {name:"医保", value:249, hb: 4.6 },
        {name:"民政", value:249, hb: 4.6 },
        {name:"公积金", value:249, hb: 4.7 },
      ],
      columns: [
        {title: '事项名称', key: 'matterName', width: "40%", tooltip: true},
        {title: '本地叫号', key: 'qjh', width: "70%",},
      ]
    }
  },
  mounted() {

  },
  methods: {

  },
}
</script>

<style lang="scss" scoped>
.ydfx{
  .title{
    width: 450px;
    height: 48px;
    background: url("~@/assets/home/right2new.png") no-repeat;
    background-size: 100% 100%;
  }
  .cnt{
    position: relative;
    display: flex;
    //width: 435px;
    margin-top: 12px;
    margin-bottom: 20px;
    overflow: hidden;
  }
  .left{
    padding-left: 21px;
    ul{
      li{
        display: flex;
        align-items: center;
        + li {
          margin-top: 10px;
        }
        .info{
          margin-left: 6px;
        }
        .num{
          background: linear-gradient(180deg, #09a5ff00 33.91%, #09a5ff 100%), #f7fffd;
          -webkit-background-clip: text !important;
          -webkit-text-fill-color: transparent;
          font-family: "Source Han Sans CN";
          font-weight: 500;
          font-size: 20px;
          line-height: 30px;
        }
        .name{
          margin-top: 2px;
          color: #ffffff;
          font-family: "Alibaba PuHuiTi";
          font-weight: 400;
          font-size: 18px;
          line-height: 25px;
        }
      }
    }
  }
  .hb{
    display: flex;
    align-items: center;
    color: #f7fffdcc;
    font-family: "Source Han Sans CN";
    font-weight: 400;
    font-size: 12px;
    line-height: 18px;
    .sj{
      width: 0;
      height: 0;
      border-left: 5px solid transparent;
      border-right: 5px solid transparent;
      border-bottom: 6px solid #fc6846;
      margin: 1.5px 2px 0;
    }
    span{
      color: #fc6846;
      font-family: "Source Han Sans CN";
      font-weight: 500;
      font-size: 12px;
      line-height: 18px;
    }
  }
  .down{
    .sj{
      border-top: 6px solid #00ebad;
      border-bottom: 0;
    }
    span{
      color: #00ebad;
    }
  }
  .right{
    margin-left: 16px;
    .scroll-table{
      width: 206px;
      height: 100%;
      .tHead{
        display: flex;
        align-items: center;
        height: 33px;
        background: rgba(0, 155, 252, 0.2);
        padding: 0 4px;
        li{
          color: rgba(26, 215, 255, 1);
          font-family: "Source Han Sans CN";
          text-align: center;
          font-weight: 350;
          font-size: 14px;
          line-height: 21px;
        }
      }
      .seamless-warp{
        height: 204px;
        overflow: hidden;
      }
      .tBody{
        li{
          height: 34px;
          cursor: pointer;
          text-align: center;
          &:nth-child(even){
            background: rgba(208, 222, 238, 0.05);
          }
          section{
            display: flex;
            font-size: 14px;
            color: #fff;
            width: 100%;
            height: 34px;
            line-height: 34px;
            >div{
              height: 100%;
              padding: 0 4px;
              overflow: hidden;
              text-overflow: ellipsis;
              white-space: nowrap;
              cursor: pointer;
              text-align: center;
            }
            .hb{
              height: 100%;
              align-items: center;
            }
            .num{
              text-align: center;
              color: #ffffff;
              font-family: "Source Han Sans CN";
              font-weight: 500;
              font-size: 14px;
              line-height: 22px;
              margin-right: 6px;
            }
          }
        }
      }
    }

    .nodata{
      height: calc(100% - 44px);
      display: flex;
      align-items: center;
      justify-content: center;
      color: #ccc;
      font-size: 16px;
    }
  }
}
</style>
